<!--机构端-微信绑定列表 -->
<template>
  <view class="wechat-container">
   
    <!-- 微信账号信息 -->
    <view class="wechat-card">
      <!-- 微信头像和基本信息 -->
      <view class="wechat-info">
        <u-avatar mode="square" :src="wechatInfo.avatar" size="120"></u-avatar>
        <view class="wechat-detail">
          <text class="wechat-name">{{ wechatInfo.nickname }}</text>
          <text class="wechat-id">微信号：{{ wechatInfo.wechatId }}</text>
        </view>
      </view>
      
      <!-- 解绑按钮 -->
			<view class="wechat-but">
				<u-button
				  type="error" 
				  plain 
				  shape="circle" 
				  size="mini" 
				  @click="showUnbindConfirm('wechat')"
				  class="unbind-btn"
				>
				  解绑
				</u-button>
			</view>
    </view>    

    
    <!-- 解绑确认弹窗 -->
    <u-modal 
      v-model="showUnbindModal" 
      :content="unbindContent"
      show-cancel-button
      @confirm="confirmUnbind"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wechatInfo: {
        avatar: '/static/wechat-avatar.jpg', // 微信头像
        nickname: '微信名', // 微信昵称
        wechatId: '1234654', // 微信号
        openId: '1234654' // 微信openID
      },
      showUnbindModal: false,
      unbindType: '', // wechat 或 openid
      unbindContent: '确定要解绑微信账号吗？解绑后将无法使用微信登录'
    }
  },
  methods: {
    // 显示解绑确认弹窗
    showUnbindConfirm(type) {
      this.unbindType = type
      this.unbindContent = type === 'wechat' 
        ? '确定要解绑微信账号吗？解绑后将无法使用微信登录' 
        : '确定要解绑OpenID吗？这可能会影响部分功能'
      this.showUnbindModal = true
    },
    // 确认解绑
    confirmUnbind() {
      uni.showLoading({
        title: '处理中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        
        if (this.unbindType === 'wechat') {
          this.wechatInfo = {
            avatar: '',
            nickname: '未绑定',
            wechatId: '未绑定',
            openId: this.wechatInfo.openId
          }
          uni.showToast({
            title: '微信账号已解绑',
            icon: 'success'
          })
        } else {
          this.wechatInfo.openId = '未绑定'
          uni.showToast({
            title: 'OpenID已解绑',
            icon: 'success'
          })
        }
        
        this.showUnbindModal = false
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.wechat-container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 40rpx;
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.wechat-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .wechat-info {
    display: flex;
    align-items: center;
    
    .wechat-detail {
      margin-left: 20rpx;
      
      .wechat-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
      }
      
      .wechat-id {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
	
	.wechat-but {
		
	}
  
  .unbind-btn {
    width: 120rpx;
  }
}

</style>